<template>
  <div class="main-content">
    <el-card style="width: 50%; margin: 30px auto">
      <div style="text-align: right; margin-bottom: 20px">
        <el-button type="primary" @click="updatePassword">修改密码</el-button>
      </div>
      <el-form
        :model="user"
        label-width="80px"
        :rules="spaceRules"
        ref="spaceFormRef"
        style="padding-right: 20px"
      >
        <div style="margin: 15px; text-align: center">
          <el-upload
            class="avatar-uploader"
            :action="$baseUrl + '/files/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="user.avatar" :src="user.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="user.username"
            placeholder="用户名"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="user.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="user.phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="update">保 存</el-button>
        </div>
      </el-form>
    </el-card>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      destroy-on-close
      :before-close="beforeFromReset"
    >
      <el-form
        :model="user"
        label-width="80px"
        style="padding-right: 20px"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="原始密码" prop="password">
          <el-input
            show-password
            v-model="user.password"
            placeholder="原始密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            show-password
            v-model="user.newPassword"
            placeholder="新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            show-password
            v-model="user.confirmPassword"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="beforeFromReset">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else if (value !== this.user.newPassword) {
        callback(new Error("确认密码错误"));
      } else {
        callback();
      }
    };

    const validatePhone = (rule, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号格式"));
      }
    };
    const validateEmail = (rule, value, callback) => {
      if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的邮箱格式"));
      }
    };
    return {
      spaceRules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: validateEmail,
            trigger: "blur",
          },
        ],
      },
      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      dialogVisible: false,

      rules: {
        password: [
          { required: true, message: "请输入原始密码", trigger: "blur" },
          { validator: this.validatePasswordFormat, trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: this.validatePasswordFormat, trigger: "blur" },
        ],
        confirmPassword: [
          { validator: validatePassword, required: true, trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    beforeFromReset() {
      this.user = JSON.parse(localStorage.getItem("xm-user") || "{}");
      this.dialogVisible = false;
    },
    validatePasswordFormat(rule, value, callback) {
      if (/^\w{6,10}$/.test(value)) {
        callback();
      } else {
        callback(new Error("密码长度为6-10个字符"));
      }
    },
    update() {
      this.$refs.spaceFormRef.validate((valid) => {
        if (valid) {
          // 保存当前的用户信息到数据库
          this.$request.put("/user/update", this.user).then((res) => {
            if (res.code === "200") {
              // 成功更新
              this.$message.success("保存成功");
              // 更新浏览器缓存里的用户信息
              localStorage.setItem("xm-user", JSON.stringify(this.user));

              // 触发父级的数据更新
              this.$emit("update:user");
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return;
        }
      });
    },
    handleAvatarSuccess(response, file, fileList) {
      // 把user的头像属性换成上传的图片的链接
      this.$set(this.user, "avatar", response.data);
    },
    // 修改密码
    updatePassword() {
      this.dialogVisible = true;
    },
    save() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request.put("/updatePassword", this.user).then((res) => {
            if (res.code === "200") {
              // 成功更新
              this.$message.success("修改密码成功");
              this.$router.push("/login");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-form-item__label {
  font-weight: bold;
}

::v-deep .el-upload {
  border-radius: 50%;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border-radius: 50%;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
</style>
